<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <button v-on:click="reduce">减少10分</button>
        <button v-on:click="add">增加10分</button>
        <p>期末考试总成绩是：{{ num }}</p>
    </div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const vm = Vue.createApp({
    data() {
        return {
            num: 360
        }
    },
    methods: {
        add: function() {
            this.num += 10
        },
        reduce: function() {
            this.num -= 10
        }
    }
  }).mount('#app');
</script>


</body>
</html>
